import { R, RX, $ } from "../lib/plugin";
// Chat只管发送数据和接收数据的操作, 具体该何时发送数据,交由Room决定
class Chat {
  constructor(dom, option) {
    let user = R.prop("user", option);
    let assistant = R.prop("assistant", option);
    this.user_id = R.prop("id", user);
    this.user_avatar = R.prop("avatar", user);
    this.user_name = R.prop("name", user);
    this.assistant_id = R.prop("id", assistant);
    this.assistant_avatar = R.prop("avatar", assistant);
    this.assistant_name = R.prop("name", assistant);
    this.room_id = R.prop("room_id", option);
  }
  dom;
  message;
  user_id;
  user_avatar;
  user_name;
  assistant_id;
  assistant_avatar;
  assistant_name;
  room_id;
  talk_item = {
    id: "",
    message: "",
  };
  talk_list = new Proxy([], {
    get: function (target, prop) {
      if (prop === "push") {
        return function (value) {
          console.log("receive message:", value);
          target.push(value);
        };
      }
      return target[prop];
    },
    set: function (target, prop, value) {
      console.log("receive message:", value);
      target.push(value);
    },
  });
  word_list = new Proxy([], {
    get: function (target, prop) {
      if (prop === "push") {
        return function (value) {
          console.log("receive word(get):", value);
          target.push(value);
        };
      }
      return target[prop];
    },
    set: function (target, prop, value) {
      console.log("receive word(push):", value);
      target.push(value);
    },
  });
  domInit() {
    this.dom.classList.add("chat");
    let el_layout = $(
      ```<div class='llm-chat-layout'>
            <div class='llm-chat-header'>
             <div class='llm-chat-user-avatar'>
               <img src='${this.chat_avatar}'>
               <div class='llm-chat-name'>${this.chat_name}</div>
             </div>
             <div class='llm-chat-close'>
               <i class='iconfont icon-stop'></i>
               <span>停止响应</span>
             </div>
             <ul class='llm-chat-list'>
               <li class='llm-chat-item assistant open-chat' >
                 <div class='llm-chat-avatar'>
                   <img src='${this.assistant_avatar}'>
                 </div>
                 <div class='llm-chat-content'>
                   <div class='llm-chat-name'>${this.user_name}</div>
                 </div>
               </li>
             </ul>
             <div class='llm-chat-input'>
               <input type='text' placeholder='请输入消息...'>
               <button class="llm-chat-send">发送</button>
            </div>
          </div>
        </div>```
    );
    let el_user_avatar = $(
      "<img class='llm-chat-user-avatar' src='" +
        this.user_avatar +
        "' alt='" +
        this.user_name +
        "'>"
    );
  }
  createAssistant(role, message, tools = null) {
    return $(
      ```
        <div class="llm-chat-item ${role.name}" data-parent_id="${parent_id}" data-id="${id}">
            <div class="llm-chat-avatar"><img src="${role.avatar}"></div>
            <div class="llm-chat-content">
                <div class="llm-chat-msg">${message}</div>
                <div class="llm-chat-tool">${tool}</div>
            </div>
        </div>
        ```
    );
  }
  onSend(message, handler) {
    return handler(message);
  }
  receiveSteam(conversation_id, word) {
    // 一个词一个词的发送
    this.word_list[conversation_id].push(word); // 接受用户的数据
  }
  stopReceive() {
    let el_stop = document.createElement("div");
    el_stop.innerHTML = "停止接收";
    el_stop.addEventListener("click", () => {});
    return RX.fromEvent(el_stop, "click");
  }
}

export default Chat;
